<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户聊天界面</title>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css" >
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap-theme.css" >
</head>
<style>
    .myLi{
        list-style-type:none;
        cursor:pointer;
        width: 100%;
    }
    .myHoverBackgroundColor{
        background-color:#9acfea;
    }
    .myClickBackgroundColor{
        background-color:#2aabd2;
    }
    .myUl{
        display: none;
    }
    /*聊天主题*/
    #chatTheme{
        width: 150px;
        margin: 0 auto;
    }
    /*聊天内容*/
    #chatTest{
        width: 840px;
        height: 400px;
        overflow: auto;
    }
    /*聊天框*/
    #chatFrame{
        border: 3px solid black;
        width: 852px;
        height: 555px;
    }
    #operation{
        border-top: 1px solid black;
        width: 850px;
        margin: 0 auto;
    }


    .oneMessage{
        height: 31px;
        margin-top: 10px;
        position: relative;
    }
    .PeopleChatName{
        font-size: 10px;
        position: absolute;
        top: 0px;
        left: 30px;
    }
    .PeopleChatTest{
        font-size: 12px;
        position: absolute;
        top: 15px;
        left: 30px;
    }


    .myMsg img,.myMsg .myPeopleChatName,.myMsg .myPeopleChatTest{
        float: right;
    }
    .myPeopleChatName{
        font-size: 10px;
        position: absolute;
        top: 0px;
        right: 30px;
    }
    .myPeopleChatTest{
        font-size: 12px;
        position: absolute;
        top: 15px;
        right: 30px;
    }
</style>
<script src="/js/jquery.js"></script>
<!--还是那句老话  只是存储数据  拿到数据  后只是显示的方式不一样-->
<!--
    把消息打印到页面的方法
        先到后台 把聊天数据全部获取
        在  通过判断  当前在那个聊天页面 显示对应的数据
        在判断 当前的聊天信息 用户名  是否与当前用户名一样  不一样显示在左边  一样显示在右边
    切换聊天 的时候 调用  把消息打印到页面的方法
    接收到信息判断是否是当前聊天框的  在决定是否 到页面打印    且  保存到作用域
-->
<script>
    var ws=null;
    var receiver="";//发送给谁的   点击更换聊天人的时候会自动更新

    //把消息保存到作用域的方法
    function conserveMsg(data) {
        // alert(data+""+JSON.stringify(data));
        // var params={
        //     sender:data.sender,
        //     msg:data.msg,
        //     photo:data.photo,
        //     receiver:data.receiver
        // }
        // alert($.param(data));
        $.getJSON("/studentManagement/succPage/chatHistoryController/conserveMsg",$.param(data),function (mydata) {
            // alert(mydata);
        });
    }

    //获取聊天记录
    function getChat() {
        // alert("更新聊天内容1 ");
        $.getJSON("/studentManagement/succPage/chatHistoryController/getChat","",function (data) {
            // alert(JSON.stringify(data));
            // alert("更新聊天内容2 ");
            var msgs="";
            /*$("#chatTheme").html()  "[[${user.name}]]"
             data[i].sender   data[i].receiver*/
            ////////////////////下面的if判断得加强/////////////////////////////////////////////////////
            for (var i=0;i<data.length;i++){
                /*alert(JSON.stringify(data[i]));*/
                if ( ("[[${user.name}]]"==$("#chatTheme").html()&&data[i].sender=="[[${user.name}]]"&&"[[${user.name}]]"==data[i].receiver)||   //第一个是自己给自己发信息
                ("[[${user.name}]]"!=$("#chatTheme").html() && (($("#chatTheme").html()==data[i].receiver && data[i].sender=="[[${user.name}]]") || ($("#chatTheme").html()==data[i].sender && data[i].receiver=="[[${user.name}]]") ) ) ||
                    ($("#chatTheme").html()=="全部群聊" && data[i].receiver=="全部群聊")){//第二个是自己给别人发信息  或者是别人发过来的     如果是你发送的信息  那么接收者要是我  反之我发信息接收者得要是你
                    msgs+=printMsg(data[i]);/*$("#chatTheme").html()==data[i].receiver*/
                }
            }
            if (msgs!=""){//如果有关于  这个聊天的
                $("#chatTest").html(msgs);
            }else{//如果没有关于  这个聊天的
                $("#chatTest").html("");
            }
            // alert(msgs);
        });
    }

    //打印信息  的方法  后期会返回   标签字符串
    function printMsg(data) {
        var divOuter="oneMessage";
        var span1="";
        var span2="";
        var msg="";
        // if (data.receiver==""){
        //     data.receiver="全部群聊"
        // }
        // alert(data.receiver+"||"+$("#chatTheme").html());
        /*$("#chatTheme").html()  "[[${user.name}]]"
             data[i].sender   data[i].receiver*/
        ////////////////////////////////////////////////////////////////////////////////////
        /*测试用户
            发送消息的时候会进来
            接收消息的时候会进来
            打印聊天记录的时候 也会进来
        */   /*alert("1");*/
        // if($("#chatTheme").html()==data[i].sender||////////////////////////////////////////////////////////////////////
        //     ("[[${user.name}]]"==data[i].sender||data.receiver=="[[${user.name}]]") ){//判断是发送到那里的
        if(data.receiver=="[[${user.name}]]"||data.sender=="[[${user.name}]]"||data.receiver=="全部群聊"){
            if (data.sender=="[[${user.name}]]"){//如果发送者是我本人
                divOuter=divOuter+" myMsg";
                span1="myPeopleChatName";
                span2="myPeopleChatTest";
            }else{
                span1="PeopleChatName";
                span2="PeopleChatTest";
            }
            msg+="<div class=\""+divOuter+"\">" +
                "<img src=\"/"+data.photo+"\" width=\"30px\" height=\"30px\">" +
                "<span class=\""+span1+"\">"+data.sender+"</span><br/>" +
                "<span class=\""+span2+"\">"+data.msg+"</span>\n" +
                "</div>";
        }
        return msg;
    }
    
    function siteInbox(){
        if('WebSocket' in window){
            ws=new WebSocket("ws://localhost:8080/studentManagement/succPage/chatSocketServer/[[${user.name}]]");
            ws.onmessage=function (event) {
                var jsonStr=event.data;
                // alert(jsonStr);
                var data=JSON.parse(jsonStr);
                // alert("555");
                //如果我当前正在与它  对话  就打印 它发送的信息
                if((($("#chatTheme").html()==data.sender&&data.receiver=="[[${user.name}]]")||
                    ("全部群聊"==$("#chatTheme").html() &&data.receiver=="全部群聊"))&&
                    ($("#chatTheme").html()!="[[${user.name}]]"&&
                        $("#chatTheme").html()!="全部群聊")){/////////////////
                    //打印信息
                    var msg=printMsg(data);
                    if (msg!=""){
                        $("#chatTest").append(msg);
                    }
                }
                if ("全部群聊"==$("#chatTheme").html() &&data.receiver=="全部群聊"&&data.sender!="[[${user.name}]]"){
                    //打印信息
                    var msg=printMsg(data);
                    if (msg!=""){
                        $("#chatTest").append(msg);
                    }
                }

                // //保存信息到作用域
                // conserveMsg(data);   //如果有多个人那么就会保存多次  所有应该在 发送信息的时候 保存 而不是接收

                //写把消息保存到作用域的方法///////////////////////////////////////////////////////////////
                //把消息打印到页面的方法///////////////////////////////////////////////////////////////////
            }
            //关闭站内信的回调方法
            ws.onclose = function(evt) {
            };
            ws.onerror=function(){
            }
            //打开站内信的回调方法
            ws.onopen = function(evt) {
            };
            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload=function () {
                closeWebSocket()
            }
            function closeWebSocket() {
                ws.close();
            }
        }else {
            alert("抱歉你的浏览器不支持,能力不足");
        }
    }
    //获取所有在线用户名
    function geTonLineUserNames() {
        $.getJSON("/studentManagement/succPage/chatHistoryController/geTonLineUserNames","",function (data) {
            // alert(JSON.stringify(data));
            var str="";
            for (var i=0;i<data.length;i++){
                str+="<li class='myLi'>"+data[i]+"</li>";
            }
            // $(".myUl .myLi:gt(0)").remove();
            $(".myUl").html(str);

            //移动到选择聊天的时候
            $("#allChat,.myLi").hover(
                function () {
                    $(this).addClass("myHoverBackgroundColor");
                },
                function () {
                    $(this).removeClass("myHoverBackgroundColor");
                }
            );
            $(".myLi").click(ChooseAChat);//绑定事件
        });
    }

    //发送消息
    function mysend(){
        var msg=$("#msgFrame").val();//读取发送的信息
        var sender="[[${user.name}]]";//获取发送人
        var receiver=$("#chatTheme").html();//获取接收者
        // if (receiver=="全部群聊"){
        //     receiver="";
        // }
        if (receiver==""){
            receiver="全部群聊";
        }
        var msgData={
            sender:sender,
            msg:msg,
            photo:"[[${user.photo}]]",
            receiver:receiver
        }
        ws.send(JSON.stringify(msgData));//发送消息

        $("#msgFrame").val("");//清空信息
        $("#msgFrame").select();//获取焦点

        var aMessage=printMsg(msgData);//一条消息
        //打印信息
        $("#chatTest").append(aMessage);

        // alert("1");
        //保存信息到作用域
        conserveMsg(msgData);
        // alert(sender);
    }

    //点击到选择聊天的时候
    function ChooseAChat() {
        // alert("123");
        $(".myLi,#allChat").removeClass("myClickBackgroundColor");
        $(this).addClass("myClickBackgroundColor");
        $("#chatTheme").html($(this).html());
        receiver=$(this).html();

        getChat();//获取当前聊天框  里的聊天信息
    }


    var mycount=1;  //用于做 在线人数  的点击事件
    $(function () {
        //当我点击在线人数时就会显示出来
        /*$("#onLine").click(function () {
            $(".myUl").toggle();
        });*/
        // $("#onLine").bind("toggle",
        //     function () {
        //         alert("12");
        //         geTonLineUserNames();
        //         $(".myUl").show();
        //     },
        //     function () {
        //         $(".myUl").hide();
        //     }
        // );
        //当我点击在线人数时就会显示出来
        $("#onLine").bind("click",function () {
            if (mycount==1){
                geTonLineUserNames();//获取聊天 人
                $(".myUl").show();
                mycount=2
            }else if (mycount==2){
                $(".myUl").hide();
                mycount=1
            }
        });

        //移动到选择聊天的时候
        $("#allChat").hover(
            function () {
                $(this).addClass("myHoverBackgroundColor");
            },
            function () {
                $(this).removeClass("myHoverBackgroundColor");
            }
        );
        //点击到选择聊天的时候
        $("#allChat").on("click",ChooseAChat);
        // $(".myLi").bind("click",ChooseAChat);
        //初始化选中全部群聊
        $("#allChat").click();

        siteInbox();//连接websocket
        // geTonLineUserNames();//获取所有的在线用户  包括自己
    });
</script>
<body><!--[[${user.name}]]-->
<aside style="float: left;margin-left: 10px">
    <nav id="allChat" style="cursor:pointer">全部群聊</nav>
    <nav id="onLine" style="cursor:pointer">在线人数</nav>
    <ul class="myUl">
        <!--<li class="myLi" ></li>
        <li class="myLi">王老师</li>
        <li class="myLi">孙老师</li>
        <li class="myLi">李老师</li>-->
    </ul>
</aside>
<!--聊天框-->
<section id="chatFrame" style="margin-left: 180px">
    <!--标题框-->
    <h3 id="chatTheme"></h3>
    <!--聊天内容-->
    <section id="chatTest">
        <div class="oneMessage"><!--表示一条消息-->
            <img src="/洪某人.jpg" width="30px" height="30px">
            <span class="PeopleChatName">[[${user.name}]]</span><br/><!--聊天人名-->
            <span class="PeopleChatTest">聊天内容</span>
        </div>
        <div class="oneMessage myMsg"><!--表示一条消息-->
            <img src="/洪某人.jpg" width="30px" height="30px">
            <span class="myPeopleChatName">[[${user.name}]]</span><br/><!--聊天人名-->
            <span class="myPeopleChatTest">聊天内容</span>
        </div>

    </section>
    <!--操作-->
    <div id="operation">
        <!--<input type="search">-->
        <!--<input type="text" style="width: 200px;height: 100px">-->
        <textarea id="msgFrame" style="margin: 0 auto;width: 500px;height: 100px;resize: none;"></textarea>
        <button onclick="mysend()">发送</button>
    </div>
</section>
</body>
</html>